<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>环球甄选</title>
  <link rel="stylesheet" href="./static/css/common.css">
  <link rel="stylesheet" href="./static/css/skin.css">
  <link rel="stylesheet" href="./static/swiper/swiper.min.css">
  <script src="./static/jquery/jquery-1.11.3.min.js"></script>
  <script src="./static/swiper/swiper.min.js"></script>
</head>

<body>
  <div id="wrapper">
    <div class="swiper" id="homeSwiper">
      <dl class="swiper-wrapper">
        <dd class="swiper-slide">
          <img src="./static/imgs/1.jpg" alt="" style="width:100%;">
        </dd>
        <dd class="swiper-slide">
          <img src="./static/imgs/1.jpg" alt="" style="width:100%;">
        </dd>
      </dl>
    </div>

    <div class="home-boutique">
      <div class="home-thead">
        <div class="name">
          <h3>甄选精品</h3>
        </div>
        <div class="desc">
          <span>boutique collection</span>
        </div>
      </div>
      <dl class="tabs" id="homeBoutiqueTabs">
        <dd class="item">
          <span>轻百年</span>
        </dd>
        <dd class="item">
          <span>美业</span>
        </dd>
        <dd class="item">
          <span>门店</span>
        </dd>
        <dd class="item">
          <span>甄选套餐</span>
        </dd>
        <dd class="item">
          <span>工具套餐</span>
        </dd>
      </dl>
      <div class="tbody" id="homeBoutique">
        <div class="swiper">
          <dl class="swiper-wrapper">
            <dd class="swiper-slide">
              <div class="img">
                <img src="./static/imgs/2.jpg" alt="">
              </div>
              <div class="exp">
                <div class="name">
                  <span>1膳食坊</span>
                </div>
                <div class="price">
                  <span>￥699.99</span>
                </div>
              </div>
            </dd>
            <dd class="swiper-slide">
              <div class="img">
                <img src="./static/imgs/2.jpg" alt="">
              </div>
              <div class="exp">
                <div class="name">
                  <span>膳食坊</span>
                </div>
                <div class="price">
                  <span>￥999.99</span>
                </div>
              </div>
            </dd>
            <dd class="swiper-slide">
              <div class="img">
                <img src="./static/imgs/2.jpg" alt="">
              </div>
              <div class="exp">
                <div class="name">
                  <span>膳食坊</span>
                </div>
                <div class="price">
                  <span>￥1099.99</span>
                </div>
              </div>
            </dd>
          </dl>
        </div>
        <div class="swiper">
          <dl class="swiper-wrapper">
            <dd class="swiper-slide">
              <div class="img">
                <img src="./static/imgs/2.jpg" alt="">
              </div>
              <div class="exp">
                <div class="name">
                  <span>2膳食坊</span>
                </div>
                <div class="price">
                  <span>￥699.99</span>
                </div>
              </div>
            </dd>
            <dd class="swiper-slide">
              <div class="img">
                <img src="./static/imgs/2.jpg" alt="">
              </div>
              <div class="exp">
                <div class="name">
                  <span>膳食坊</span>
                </div>
                <div class="price">
                  <span>￥999.99</span>
                </div>
              </div>
            </dd>
          </dl>
        </div>
        <div class="swiper">
          <dl class="swiper-wrapper">
            <dd class="swiper-slide">
              <div class="img">
                <img src="./static/imgs/2.jpg" alt="">
              </div>
              <div class="exp">
                <div class="name">
                  <span>3膳食坊</span>
                </div>
                <div class="price">
                  <span>￥699.99</span>
                </div>
              </div>
            </dd>
            <dd class="swiper-slide">
              <div class="img">
                <img src="./static/imgs/2.jpg" alt="">
              </div>
              <div class="exp">
                <div class="name">
                  <span>膳食坊</span>
                </div>
                <div class="price">
                  <span>￥999.99</span>
                </div>
              </div>
            </dd>
            <dd class="swiper-slide">
              <div class="img">
                <img src="./static/imgs/2.jpg" alt="">
              </div>
              <div class="exp">
                <div class="name">
                  <span>膳食坊</span>
                </div>
                <div class="price">
                  <span>￥999.99</span>
                </div>
              </div>
            </dd>
            <dd class="swiper-slide">
              <div class="img">
                <img src="./static/imgs/2.jpg" alt="">
              </div>
              <div class="exp">
                <div class="name">
                  <span>膳食坊</span>
                </div>
                <div class="price">
                  <span>￥999.99</span>
                </div>
              </div>
            </dd>
          </dl>
        </div>
        <div class="swiper">
          <dl class="swiper-wrapper">
            <dd class="swiper-slide">
              <div class="img">
                <img src="./static/imgs/2.jpg" alt="">
              </div>
              <div class="exp">
                <div class="name">
                  <span>4膳食坊</span>
                </div>
                <div class="price">
                  <span>￥699.99</span>
                </div>
              </div>
            </dd>
            <dd class="swiper-slide">
              <div class="img">
                <img src="./static/imgs/2.jpg" alt="">
              </div>
              <div class="exp">
                <div class="name">
                  <span>膳食坊</span>
                </div>
                <div class="price">
                  <span>￥999.99</span>
                </div>
              </div>
            </dd>
          </dl>
        </div>
        <div class="swiper">
          <dl class="swiper-wrapper">
            <dd class="swiper-slide">
              <div class="img">
                <img src="./static/imgs/2.jpg" alt="">
              </div>
              <div class="exp">
                <div class="name">
                  <span>5膳食坊</span>
                </div>
                <div class="price">
                  <span>￥699.99</span>
                </div>
              </div>
            </dd>
            <dd class="swiper-slide">
              <div class="img">
                <img src="./static/imgs/2.jpg" alt="">
              </div>
              <div class="exp">
                <div class="name">
                  <span>膳食坊</span>
                </div>
                <div class="price">
                  <span>￥999.99</span>
                </div>
              </div>
            </dd>
          </dl>
        </div>
      </div>
    </div>

    <div class="home-company">
      <div class="home-thead">
        <div class="name">
          <h3>公司简介</h3>
        </div>
        <div class="desc">
          <span>company profile</span>
        </div>
      </div>
      <div class="tbody">
        <div class="rich">
          <p>阿里巴巴集团控股有限公司于1999年由马云、蔡崇信等18人在浙江杭州创立阿里巴巴最初是B2B起家，1999年创立时开展的 B2B模式在国际上尚无先例。2003年创立C2C平台淘宝网后转型为B2C平台。</p>
          <img src="./static/imgs/3.jpg" alt="">
        </div>
      </div>
    </div>

    <div class="home-contact">
      <div class="title">
        <p>和我们一起开启盛宴之旅</p>
      </div>
      <div class="btn">
        <img src="./static/icon/2.png" alt="">
        <span>添加客服</span>
      </div>
      
    </div>

  </div>

  <div id="fixedBar">
    <div class="inner">
      <dl class="list">
        <dd class="item">
          <div class="img">
            <img src="./static/icon/3.png" alt="">
          </div>
          <div class="name">
            <span>首页</span>
          </div>
        </dd>
        <dd class="item">
          <div class="img">
            <img src="./static/icon/4.png" alt="">
          </div>
          <div class="name">
            <span>商城</span>
          </div>
        </dd>
        <dd class="item">
          <div class="img">
            <img src="./static/icon/5.png" alt="">
          </div>
          <div class="name">
            <span>甄聊</span>
          </div>
        </dd>
        <dd class="item">
          <div class="img">
            <img src="./static/icon/6.png" alt="">
          </div>
          <div class="name">
            <span>乐园</span>
          </div>
        </dd>
        <dd class="item">
          <div class="img">
            <img src="./static/icon/7.png" alt="">
          </div>
          <div class="name">
            <span>我的</span>
          </div>
        </dd>
      </dl>
    </div>
  </div>

  <script src="./static/js/action.js"></script>
  
  <script>
    $(function(){
      var swiper = new Swiper('#homeSwiper', {});
    });

    $(function(){
      $('#homeBoutiqueTabs .item').on('click', function() {
        $(this).addClass('is-active').siblings().removeClass('is-active');
        var index = $(this).index();
        $('#homeBoutique .swiper').eq(index).show().siblings('.swiper').hide();
      });

      $('#homeBoutique .swiper').each(function(index, element) {
        var boutiqueSwiper = new Swiper(element, {
          slidesPerView: 2.6,
          spaceBetween: 20,
          freeMode: true,
        });
      });

      // 默认显示第一个swiper
      $('#homeBoutiqueTabs .item').eq(0).addClass('is-active');
      $('#homeBoutique .swiper').hide();
      $('#homeBoutique .swiper').eq(0).show();
    })
  </script>
</body>
</html>
